<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      class="breadcrumb-base"
      style="line-height: 30px;"
    >
      <el-breadcrumb-item>
        <i class="el-icon-office-building"></i>
        机构信息
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main-container">
      <el-row class="line-text-title" type="flex" justify="middle">
        <span class="title-medium text-important">
          <!--{{ institution.name }}-->
          基本信息
        </span>
        <el-button type="primary" style="margin-left: 20px;" size="mini" @click="editInstitution">编辑</el-button>
      </el-row>

      <el-row class="line-text">
        <el-col :span="8">
          <span class="content-text">机构名称: {{ institution.name }}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">系统名称: {{ institution.abbreviation }}</span>
        </el-col>
      </el-row>
      <el-row class="line-text">
        <el-col :span="24">
          <span
            class="content-text"
          >机构地址: {{ institution.provinceName }}-{{institution.cityName}}-{{institution.countyName}} {{ institution.address }}</span>
        </el-col>
      </el-row>
      <el-row class="line-text">
        <el-col :span="8">
          <span class="content-text">机构类型: {{ institution.institutionTypeName }}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">机构性质: {{ institution.institutionKindName }}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">所有制形式: {{ institution.ownershipName }}</span>
        </el-col>
      </el-row>
      <el-row class="line-text">
        <el-col :span="8">
          <span class="content-text">经营性质: {{ institution.businessNatureName }}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">机构等级: {{ institution.institutionLevelName }}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">机构注册时间: {{ institution.createTime }}</span>
        </el-col>
      </el-row>
      <!--<el-row class="line-text">-->
      <!--<el-col :span="8">-->
      <!--<span class="content-text">机构创建时间: {{ institution.buildDate }}</span>-->
      <!--</el-col>-->
      <!--</el-row>-->
      <el-row v-if="isPlatform" class="line-text-title" type="flex" justify="middle">
        <span class="title-medium text-important">扫描配置</span>
      </el-row>
      <el-row v-if="isPlatform" class="line-text">
        <el-col :span="8">
          <span class="content-text">扫描间隔时间: {{ institution.scanInterval }}秒</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">监控间隔时间: {{ institution.monitoringInterval }}秒</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">扫描起始日期: {{ institution.scanStartDate }}</span>
        </el-col>
      </el-row>
      <el-row v-if="isPlatform" class="line-text">
        <el-col :span="8">
          <span class="content-text">源文件路径: {{ institution.sourceFileAddr }}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">目标文件路径: {{ institution.targetFileAddr }}</span>
        </el-col>
      </el-row>
      <el-row v-if="isPlatform" class="line-text-title" type="flex" justify="middle">
        <span class="title-medium text-important">院内诊断</span>
      </el-row>
      <el-row v-if="isPlatform" class="line-text">
        <el-col :span="8">
          <span class="content-text">是否启用任务认领: {{ institution.isEnableTaskClaim }}</span>
        </el-col>
        <el-col :span="8">
          <span class="content-text">是否启用诊断组: {{ institution.isEnableSubgroup }}</span>
        </el-col>
      </el-row>
      <!-- <el-row class="line-text-title" type="flex" justify="middle">
        <span class="title-medium text-important">分院设置</span>
        <el-button type="primary" style="margin-left: 20px;" size="mini" @click="addBranchCourts">添加</el-button>
      </el-row>
      <el-row v-if="isPlatform">
        <el-table
          :data="tableData"
          :header-cell-style="{'background-color': '#E6E9EF',
                                                     'color':'#777C7C',
                                                     'font-weight':'400',
                                                     'border-right': '1px solid #ffffff'}"
          border
          style="width: 30%"
        >
          <el-table-column prop="name" label="分院名称" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="editBranchCourts(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="delBranchCourts(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row> -->
    </div>
    <el-dialog :title="branchCourtsTitle" :visible.sync="dialogVisible" width="30%" center>
      <el-form ref="branchCourtsInfo" :model="branchCourts" label-width="100px">
        <el-row>
          <el-col :span="16">
            <el-form-item label="分院名称">
              <el-input v-model="branchCourts.name" placeholder=" " size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBranchCourtsInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment/moment';

export default {
  name: 'InstitutionInfo',
  data() {
    return {
      isPlatform: this.$store.state.institution.isPlatform,
      institution: {
        id: 1,
        name: '',
        abbreviation: '',

        area: '',
        address: '',

        institutionTypeName: '',
        institutionKindName: '',
        ownershipName: '',
        businessNatureName: '',
        institutionLevelName: '',

        buildDate: '',
        createTime: '',

        scanInterval: '',
        monitoringInterval: '',
        scanStartDate: '',
        sourceFileAddr: '',
        targetFileAddr: '',

        isEnableTaskClaim: '是',
        isEnableSubgroup: '是'
      },
      dialogVisible: false,
      branchCourts: { id: '', name: '' },
      branchCourtsTitle: '',
      tableData: []
    };
  },
  async mounted() {
    const { state } = this.$store;
    const res = await this.$axios({
      // 详见 axios 请求配置项
      method: 'GET',
      url: `/PROXY-Remote/institutions/${state.institution.id}`
    });

    if (res && res.data.code === 200) {
      // 请求成功
      this.institution = res.data.data;
      // 机构注册时间
      this.institution.createTime = moment(this.institution.createTime).format(
        'YYYY-MM-DD'
      );
      // 扫描起始时间
      this.institution.scanStartDate = moment(
        this.institution.scanStartDate
      ).format('YYYY-MM-DD');
      // 是否启用任务认领
      this.institution.isEnableTaskClaim = this.institution.isEnableTaskClaim
        ? '是'
        : '否';
      // 是否启用诊断组
      this.institution.isEnableSubgroup = this.institution.isEnableSubgroup
        ? '是'
        : '否';
    }
    this.getBranchCourtsInfo();
  },
  computed: {},
  methods: {
    editInstitution() {
      this.$router.push(`${this.$route.path}/edit`);
    },
    addBranchCourts() {
      this.branchCourtsTitle = '添加分院信息';
      this.dialogVisible = true;
      this.branchCourts = { id: '', name: '' };
    },
    submitBranchCourtsInfo() {
      if (this.branchCourts.id) {
        this.$axios({
          method: 'PUT',
          url: `/PROXY-Remote/branch`,
          data: {
            id: this.branchCourts.id,
            name: this.branchCourts.name,
            isDelete: this.branchCourts.isDelete
          }
        }).then(res => {
          if (res && res.data.code === 200) {
            this.dialogVisible = false;
            this.getBranchCourtsInfo();
          }
        });
      } else {
        this.$axios({
          method: 'POST',
          url: `/PROXY-Remote/branch`,
          data: { name: this.branchCourts.name }
        }).then(res => {
          if (res && res.data.code === 200) {
            this.dialogVisible = false;
            this.getBranchCourtsInfo();
          }
        });
      }
    },
    getBranchCourtsInfo() {
      this.$axios({
        method: 'GET',
        url: `/PROXY-Remote/branch`
      }).then(res => {
        if (res && res.data.code === 200) {
          this.tableData = res.data.data;
        }
      });
    },
    editBranchCourts(row) {
      this.branchCourts = {
        id: row.id,
        name: row.name,
        isDelete: row.isDelete
      };
      this.branchCourtsTitle = '编辑分院信息';
      this.dialogVisible = true;
    },
    delBranchCourts(row) {
      this.$confirm('确定删除此分院？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios({
            method: 'DELETE',
            url: `/PROXY-Remote/branch/${row.id}`
          }).then(res => {
            if (res && res.data.code === 200) {
              this.getBranchCourtsInfo();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  }
};
</script>

<style scoped>
</style>
